<style lang="less" scoped>
    // .ivu-form-item{
    //     margin-bottom:0px;
    // }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
        
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    .lm{
        
    }
    .lottery-content-tab{
        .ivu-col{
            padding: 10px 0;
            // border: 1px solid;
            div{
                // color: #fff;
                // padding: 10px 0;
                
                text-align: center;
                // background: rgba(0,153,229,.9);
            }
        }
        .tab-content-box{
            border: 1px solid #f3f3f3;
            padding: 10px;
            transition: all 0.4s ease;
        }
        .tab-content-box:hover{
            box-shadow: 0px 0px 4px #eee;
        }
        .lottery-content-tab-box{
            background: #fbfbfb;
            margin-left: 0px !important;
            margin-right: 0px !important;
            
            
        }
        .content-tab-box-center{
                .ivu-col{
                    >div{
                        margin-top: 12px;
                    }
                }
            }
        .content-tab-box-top{
            overflow: hidden;
            margin-bottom: 5px;
            div{
                text-align: left;
            }
            .content-tab-box-top-name{
                font-size: 16px;
                height: 32px;
                line-height: 32px;
                color: #57a3f3;
            }
            .content-tab-box-top-but{
                text-align: right;
            }
            .lottery-content-tab-box-l{
                float: left;
                height: 50px;
                line-height: 50px;
                margin-left: 20px;
            }
            .lottery-content-tab-box-l-s{
                // line-height: 30px;
            }
        }
        .content-tab-box-center{
            button{
                background: #fff;
                border: 1px solid #57a3f3;
                color: #57a3f3;
                font-weight:bold;
                box-shadow: 0px 0px 16px rgba(45,140,240,.2);
            }
        }
        .content-tab-box-but{
            margin-top: 5px;
        }
    }
    .biaos{
        text-align: center;
    }
    .tab-content-box-form{
        .ivu-col{
            padding: 0px 0px;
        }
        .ivu-form-item {
            margin-bottom: 0px;
        }
        .biaos{
            margin-top: 0px !important;
        }
        .ivu-form-item-label{
            margin-top: 5px !important;
        }
        
    }
</style>
<template>
    <div>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 2px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                            <Form :model="formItem" label-position="left" inline>
                                彩种类型：
                                <Select v-model="ltype" @on-change="thisTab=0;changeTab()"  size="small" style="width:120px">
                                    <Option v-for="(key,index) in lottery" :value="index" :key="key.id">{{key.name}}</Option>                                        
                                </Select>
                                <ButtonGroup size="small">
                                    <Button v-for="(key,index) in lottery[ltype].children" :key="index" @click="getTab(key,index)" :type="thisTab==index?'primary':'ghost'">{{key.name}}</Button>
                                </ButtonGroup>
                                <Button type="info"  size="small" style="margin-top: 0px;" @click="fastSetting">快速设置</Button>
                                <Button type="primary"  size="small" style="margin-top: 0px;" @click="SaveAll">保存赔率</Button>                                 
                                <Button type="warning"  size="small" @click="reset">重置修改</Button>
                                <Button type="success"  size="small" @click="reLottery">手动更新</Button>
                                <ButtonGroup size="small" style="float: right;">
                                    <Button  @click="batw(lottery[ltype].children[thisTab],true)" :type="lottery[ltype].children[thisTab].enable==true?'success':'ghost'">{{lottery[ltype].children[thisTab].enable==true?'已开启':'开启'}}</Button>
                                    <Button  @click="batw(lottery[ltype].children[thisTab],false)" :type="lottery[ltype].children[thisTab].enable==false?'warning':'ghost'">{{lottery[ltype].children[thisTab].enable==false?'已关闭':'关闭'}}</Button>
                                </ButtonGroup>
                            </Form>
                        </Col>
                    </Row>
                </p>
                <div class="lottery-content-tab">
                    <div>
                        <Row :gutter="20" justify="center" align="bottom">
                            <Col span="24" v-for="(key,index) in lottery[ltype].children[thisTab].children" :key="index">
                                <div class="tab-content-box">
                                    <div class="lottery-content-tab-box content-tab-box-top">
                                        <div class="lottery-content-tab-box-l" style="font-size: 25px;color: #57a3f3;">
                                           <span>{{key.name}}</span> 
                                        </div>
                                        <div class="lottery-content-tab-box-l lottery-content-tab-box-l-s">
                                            <Input size="small" :number="true" v-model="key.data.min_money" style="width: 150px;margin-top: 12px;" ><span slot="prepend">单注最低</span></Input>
                                        </div>
                                        <div class="lottery-content-tab-box-l lottery-content-tab-box-l-s">
                                            <Input size="small" :number="true" v-model="key.data.max_money" style="width: 150px;margin-top: 12px;" ><span slot="prepend">单注最高</span></Input>
                                        </div>
                                        <div class="lottery-content-tab-box-l lottery-content-tab-box-l-s">
                                            <Input size="small" :number="true" v-model="key.data.max_turn_money" style="width: 150px;margin-top: 12px;" ><span slot="prepend">单期最高</span></Input>
                                        </div>
                                        <div class="lottery-content-tab-box-l" style="">
                                           <ButtonGroup size="small">
                                                <Button  @click="key.enable==true?key.enable=false:key.enable=true" :type="key.enable==true?'success':'ghost'">{{key.enable==true?'已开启':'开启'}}</Button>
                                                <Button  @click="key.enable==true?key.enable=false:key.enable=true" :type="key.enable==false?'warning':'ghost'">{{key.enable==false?'已关闭':'关闭'}}</Button>
                                            </ButtonGroup>
                                        </div>
                                        <div class="lottery-content-tab-box-l lottery-content-tab-box-l-s" style="float: right;">
                                            <Button type="primary" size="small" @click="bcclass(key,index)">保存</Button>
                                            <Button type="ghost" size="small" @click="czclass(key,index)">重置</Button>
                                        </div>
                                    </div>
                                    <Row :gutter="20" type="flex" justify="space-around" class-name="lottery-content-tab-box content-tab-box-center" >
                                        <Col span="2" v-for="(keys,indexs) in key.children" :key="indexs">
                                            <div><Button type="ghost" shape="circle">{{keys.name}}</Button></div>
                                            <div><InputNumber size="small" :min="0" :step="0.1" v-model="keys.odds"></InputNumber></div>
                                        </Col>
                                    </Row>
                                    <!-- <Row :gutter="20" type="flex" justify="center" class-name="lottery-content-tab-box content-tab-box-but" >
                                        <Col span="6">
                                            <div><Button type="primary" shape="circle">保存</Button></div>
                                        </Col>
                                        <Col span="6">
                                            <div><Button type="ghost" shape="circle">重置</Button></div>
                                        </Col>
                                    </Row> -->
                                </div>
                            </Col>
                            <Spin size="large" fix v-if="spinShow"></Spin>
                        </Row>
                        
                    </div>
                
                </div>
            </Card>
        </Row>
        <Modal
            title="快速设置"
            v-model="modal10"
            ok-text="传送"
            @on-ok="transmit"
            @on-cancel="cancel"
            class-name="vertical-center-modal">
            <Form :model="formBatch" label-position="left" :label-width="100">
                <FormItem label="赔率：">
                    <Input :number="true" v-model="formBatch.odds"></Input>
                </FormItem>
                <FormItem label="单注金额：">
                    <Row>
                        <Col span="11">
                            <Input :number="true" v-model="formBatch.stakesMin"><span slot="prepend">最低</span></Input>
                        </Col>
                        <Col span="2">
                            <div class="biaos"><</div>
                        </Col>
                        <Col span="11">
                            <Input :number="true" v-model="formBatch.stakesMax"><span slot="append">最高</span></Input>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="单期金额：">
                    <Row>
                        <Col span="11">
                            <Input :number="true" v-model="formBatch.termMax"><span slot="append">最高</span></Input>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import util from '@/libs/util';
export default {
    components: {
        
    },
    inject: ['reload'],
    data () {
        return {
            spinShow:true,
            formBatch:{
                odds:0,
                stakesMin:0,
                stakesMax:0,
                termMin:0,
                termMax:0
            },
            formItem:{
                
            },
            ltype:0,
            thisTab:0,
            lottery:[],
            modal10: false,
            value2:1.6,
            backup:[],
            percent:50
        }
    },
    computed: {
        color () {
            let color = '#2db7f5';
            if (this.percent == 100) {
                color = '#5cb85c';
            }
            return color;
        }
    },
    methods: {
        init(){
            
        },
        changeTab(){
            this.getTab(this.lottery[this.ltype].children[this.thisTab],this.thisTab)
        },
        bcclass(k,i){
            let a=false
            for(let key in k){
                if(key!=='data'&&key!=='children'){
                    if(k[key]!==this.backup[this.ltype].children[this.thisTab].children[i][key]){
                        a=true
                    }
                }else if(key=='data'){
                    for(let keys in k[key]){
                        if(k[key][keys]!==this.backup[this.ltype].children[this.thisTab].children[i][key][keys]){
                            a=true
                        }
                    }
                }
            }
            if(a==true){
                let data={
                    query:{
                        mode:'cat'
                    },
                    data:{
                        cat_id:k.id,
                        enable:k.enable,
                        min_money:k.data.min_money,
                        max_money:k.data.max_money,
                        max_turn_money:k.data.max_turn_money,
                    }
                }
                this.$api.repeater(this,'setOdds',data).then(res=>{
                    if(res.success==true){
                        this.$Notice.success({
                            title: '操作成功',
                        });
                        // this.reLottery()
                    }else{
                        this.$Notice.error({
                            title: '操作失败',
                        });
                    }
                })
            }else{
                this.$Notice.error({
                    title: '操作失败',
                    desc: '未修改'
                });
            }
        },
        czclass(k,i){
            for(let key in k){
                if(key!=='data'&&key!=='children'){
                    k[key]=this.backup[this.ltype].children[this.thisTab].children[i][key]
                }else if(key=='data'){
                    for(let keys in k[key]){
                        k[key][keys]=this.backup[this.ltype].children[this.thisTab].children[i][key][keys]
                    }
                }
            }
        },
        fastSetting(){
            this.formBatch={
                odds:0,
                stakesMin:0,
                stakesMax:0,
                termMin:0,
                termMax:0
            }
            this.modal10=true
        },
        transmit(){
            let arr=this.lottery[this.ltype].children[this.thisTab].children
            for(let i=0;i<arr.length;i++){
                if(this.formBatch.odds!==0){
                    for(let j=0;j<arr[i].children.length;j++){
                        this.lottery[this.ltype].children[this.thisTab].children[i].children[j].odds=this.formBatch.odds
                    }
                }
                if(this.formBatch.stakesMin!==0){
                    this.lottery[this.ltype].children[this.thisTab].children[i].data.min_money=this.formBatch.stakesMin
                }
                if(this.formBatch.stakesMax!==0){
                    this.lottery[this.ltype].children[this.thisTab].children[i].data.max_money=this.formBatch.stakesMax
                }
                if(this.formBatch.termMin!==0){
                    this.lottery[this.ltype].children[this.thisTab].children[i].data.min_bet=this.formBatch.termMin
                }
                if(this.formBatch.termMax!==0){
                    this.lottery[this.ltype].children[this.thisTab].children[i].data.max_turn_money=this.formBatch.termMax
                }
            }
        },
        SaveAll(){
            let d=this.lottery[this.ltype].children[this.thisTab].children
            let $d=this.backup[this.ltype].children[this.thisTab].children
            let arr=[]
            for(let i = 0;i<d.length;i++){
                for(let j = 0;j<d[i].children.length;j++){
                    if(d[i].children[j].odds!==$d[i].children[j].odds){
                        arr.push({play_id:d[i].children[j].id,odds:d[i].children[j].odds,enable:d[i].children[j].enable})
                    }
                }
            }
            
            if(arr.length > 0){
                let data={
                    query:{
                        mode:'pl'
                    },
                    data:arr
                }
                this.$api.repeater(this,'setOdds',data).then(res=>{
                    if(res.success==true){
                        this.reLottery()
                    }else{
                        this.$Notice.error({
                            title: '操作失败',
                        });
                    }
                })
                // this.$api.setOdds(data).then(response=>{
                //     response.json().then(responseJson=> {
                //         if(responseJson.success==true){
                //             this.reLottery()
                //         }else{
                //             this.$Notice.error({
                //                 title: '操作失败',
                //             });
                //         }
                //     })
                // })
            }else{
                this.$Notice.error({
                    title: '操作失败',
                    desc: '赔率未进行修改'
                });
            }
            // 
            
        },
        batw(d,b){
            d.enable=b
            if(d.enable !== this.backup[this.ltype].children[this.thisTab].enable){
                let data={
                    query:{
                        mode:'tab'
                    },
                    data:{
                        tab_id:d.id,
                        enable:d.enable
                    }
                }
                this.$api.repeater(this,'setOdds',data).then(res=>{
                    if(res.success==true){
                        this.reLottery()
                    }else{
                        this.$Notice.error({
                            title: '操作失败',
                        });
                        d.enable=this.backup[this.ltype].children[this.thisTab].enable
                    }
                })
                // this.$api.setOdds(data).then(response=>{
                //     response.json().then(responseJson=> {
                //         if(responseJson.success==true){
                //             this.reLottery()
                //         }else{
                //             this.$Notice.error({
                //                 title: '操作失败',
                //             });
                //             d.enable=this.backup[this.ltype].children[this.thisTab].enable
                //         }
                //     })
                // })
            }else{
                // this.$Notice.error({
                //     title: '操作失败',
                // });
                d.enable=this.backup[this.ltype].children[this.thisTab].enable
            }
        },
        reLottery(){
            this.percent=0
            let state = '正在更新缓存数据...'
            this.$Spin.show({
                render: (h) => {
                    return h('div', [
                        h('i-Circle', {
                            props: {
                                percent: this.percent,
                                'stroke-color': this.color
                            }
                        },[
                            h('Icon',{
                                 props:{
                                     type:'ios-checkmark-empty',
                                     size:70,
                                     
                                 },
                                 style:{
                                     color:'#5cb85c',
                                     display:this.percent==100?'':'none'
                                 }
                            }),
                            h('span',{
                                style:{
                                    'font-size':'24px',
                                    display:this.percent!==100?'':'none'
                                }
                            },this.percent+'%')
                        ]),
                        h('div', {
                            props: {
                                
                            }
                        },state)
                    ])
                }
            });
            //存储当前彩种状态
            this.$store.commit('setthisltype',{ltype:this.ltype,thisTab:this.thisTab})
            this.percent=30

            this.$api.reOdds().then(response=>{
                response.json().then(responseJson=> {
                    if(responseJson.success==true){
                        this.percent=80
                        state = '正在同步赔率信息...'
                        this.$api.getGameInfo().then(response=>{
                            response.json().then(responseJsons=> {
                                if(responseJsons.success==true){
                                    this.percent=100
                                    state = '完成!'
                                    sessionStorage.gameInfo=JSON.stringify(responseJsons.data)
                                    //存储彩种信息
                                    util.blarr(responseJsons.data)
                                    this.$Notice.success({
                                        title: '操作成功',
                                    });
                                    setTimeout(() => {
                                        this.$Spin.hide();
                                        //刷新页面
                                        this.reload()
                                    }, 800);
                                }else{

                                }
                            })
                        })
                    }else{
                        
                    }
                })
            })
        },
        cancel(){

        },
        reset(){
            let olottery=JSON.parse(JSON.stringify(this.backup[this.ltype].children[this.thisTab].children))
            let arr=this.lottery[this.ltype].children[this.thisTab].children
            for(let i=0;i<arr.length;i++){
                for(let j=0;j<arr[i].children.length;j++){
                    
                    this.lottery[this.ltype].children[this.thisTab].children[i].children[j].odds=olottery[i].children[j].odds
                }
                let data={}
                data={...olottery[i].data}
                this.lottery[this.ltype].children[this.thisTab].children[i].data.min_money=data.min_money
                this.lottery[this.ltype].children[this.thisTab].children[i].data.max_money=data.max_money
                this.lottery[this.ltype].children[this.thisTab].children[i].data.min_bet=data.min_bet
                this.lottery[this.ltype].children[this.thisTab].children[i].data.max_turn_money=data.max_turn_money
            }
        },
        replace(arr1, arr2) {
            let temp;
            arr1.map(function(v1) {
                (temp = arr2.find(function(v2) {
                    return v1.id == v2.cat_id;
                })) && (v1.data = temp)
                return v1;
            })
            return arr1;
        },
        getTab(k,i){
            this.spinShow=true
            this.thisTab=i
            this.$api.repeater(this,'getOdds',{tab_id:k.id}).then(res=>{
                if(res.success==true){
                    this.spinShow=false
                    this.$set(this.lottery[this.ltype].children[this.thisTab],"children", this.replace(JSON.parse(JSON.stringify(this.lottery[this.ltype].children[this.thisTab].children)), res.data))
                    this.backup[this.ltype].children[this.thisTab].children=JSON.parse(JSON.stringify(this.replace(JSON.parse(JSON.stringify(this.backup[this.ltype].children[this.thisTab].children)), res.data)))
                }else{
                   
                }
            })
        }
    },
    created(){
        this.lottery=JSON.parse(sessionStorage.lottery)
        this.backup=JSON.parse(sessionStorage.lottery)
        this.ltype=this.$store.state.app.thisltype.ltype;
        this.thisTab=this.$store.state.app.thisltype.thisTab;
        this.getTab(this.lottery[this.ltype].children[this.thisTab],this.thisTab)
    },
    mounted(){
            
        this.init()
	}
};
</script>
